<template>
  <div style="height: calc(100% - 100px);background-color: #fff">
    <!-- 图册-->
    <div class="course-container" v-if="item.sortType === 'ATLAS'" @click="toDetail()">
      <div class="course-img">
        <van-image style="width: 100px;height: 80px" :src="appUrl + item.imgPath"></van-image>
      </div>
      <div class="course-desc">
        <h4 v-html="ruleTitle(item.title)"></h4> <!--名称-->
        <p class="desc" v-html="ruleTitle(item.summary)"></p> <!--简介-->
        <div class="desc-time">
          <p>{{circleType[item.sortType]}}</p> <!--类型-->
          <p>{{ item.createDateTime | formTime('splitTime') }}</p> <!--时间-->
        </div>
      </div>
    </div>
    <!-- 话题 -->
    <div class="topic-container" v-if="item.sortType === 'TOPIC'" @click="toDetail()">
      <h4 v-html="item.summary"></h4>
      <div class="question-time">
        <div class="question-person">
          <p>{{$t('circle267')}}：</p>
          <p v-html="ruleTitle(item.authorName)"></p>
        </div>
        <p>{{$t('circle268')}}：{{item.partakeCount}}</p>
        <p>{{ item.createDateTime | formTime('splitTime') }}</p>
      </div>
    </div>
    <!--投票-->
    <div class="topic-container" v-if="item.sortType === 'VOTE'" @click="toDetail()">
      <h4 v-html=ruleTitle(item.title)></h4>
      <div class="question-time">
        <div class="question-person">
          <p>{{$t('circle267')}}：</p>
          <p v-html="ruleTitle(item.authorName)"></p>
        </div>
        <p>{{$t('circle268')}}：{{item.partakeCount}}</p>
        <p>{{ item.createDateTime | formTime('splitTime') }}</p>
      </div>
    </div>
    <!--活动-->
    <div class="active-container" v-if="item.sortType === 'ACTIVITY'" @click="toDetail()">
      <span v-html="ruleTitle(item.title)" />
      <div>
        <span>{{$t('circle269')}}:</span>
        <span v-html="ruleTitle(item.summary)" />
      </div>
      <div>
        <span>{{ item.createDateTime }} —— {{item.entDateTime }}</span>
      </div>
      <div style="display: flex;justify-content: space-between">
        <div>
          <span>{{$t('selected_from')}}:</span>
          <span>{{$t('circle262')}}</span>
        </div>
        <div>
          <span>{{$t('circle271')}}</span>
          <span>{{item.partakeCount}}</span>
        </div>
        <div>
          <span>{{$t('circle272')}}</span>
          <span v-html="ruleTitle(item.authorName)"></span>
        </div>
      </div>
    </div>
    <!-- 知识库 -->
    <div class="knowledge-container" v-if="item.sortType === 'KNOWLEDGE'" @click="toDetail()">
      <div class="knowledge-title">
        <div class="icon">
          <van-image fit="cover" width="30px" height="30px" :src="item.sourceType | getIcon"/>
        </div>
        <p v-html="ruleTitle(item.title)"></p>
      </div>
      <div class="knowledge-time">
        <div class="knowledge-person">
          <span>{{$t('circle265')}}：</span>
          <span v-html="ruleTitle(item.authorName)"></span>
        </div>
        <p>{{$t('circle266')}}：{{item.partakeCount}}</p>
        <p>{{ item.createDateTime | formTime('splitTime') }}</p>
      </div>
    </div>
    <!-- 人员 -->
    <div class="user-container" v-if="item.sortType === 'MEMBER'" @click="toDetail()">
      <van-image round width="70px" height="70px" :src="appUrl + item.imgPath" />
      <div class="user-desc">
        <h4 v-html="ruleTitle(item.title)"></h4>
        <div class="user-dept">
          <span>{{($t('department'))}}：</span>
          <span v-html="ruleTitle(item.summary)"></span>
        </div>
        <div class="user-time">
          <p>{{($t('circle264'))}}：{{item.partakeCount}}</p>
          <p>{{ item.createDateTime | formTime('splitTime') }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {Image, Icon} from 'vant';
import mixin from '@/components/mixin/Mixin.js';
import {cwnEncrypt, cwnDecrypt} from '@/utils/tools';
import dir from '../../../../static/images/dir.png';
import txt from '../../../../static/images/txt.png';
import xls from '../../../../static/images/excel.png';
import doc from '../../../../static/images/word.png';
import article from '../../../../static/images/article.png';
import ppt from '../../../../static/images/ppt.png';
import brain from '../../../../static/images/brain.png';
export default {
    name: 'SearchItem',
    props: {
        // 搜索内容
        searchValue: {
            type: String,
            default: ''
        },
        item: {},
        wcId: {
            type: Number,
            default: 0
        }
    },
    mixins: [mixin],
    components: {
        [Image.name]: Image,
        [Icon.name]: Icon
    },
    computed: {
        ruleTitle() {
            return (title) => {
                if (!title) {
                    return '';
                }
                if (this.searchValue && this.searchValue.length > 0) {
                    // 匹配关键字正则
                    const replaceReg = new RegExp(this.searchValue, 'g');
                    // 高亮替换v-html值
                    const replaceString =
                        '<span style="color: #075ebb;">' + this.searchValue + '</span>';
                    // 开始替换
                    title = title.replace(replaceReg, replaceString);
                }
                return title;
            };
        },
        htmlHeightLight() {
            return (val) => {
                const div = document.createElement('div');
                div.innerHTML = val;
                if (div.innerText.indexOf(this.searchValue) !== -1 && val !== '') {
                    div.innerText = div.innerText.replace(new RegExp(this.searchValue, 'g'), '<span style="color: #075ebb;">' + this.searchValue + '</span>');
                    const html = div.innerHTML.replace(new RegExp('&lt;', 'g'), '<').replace(new RegExp('&gt;', 'g'), '>');
                    return html;
                } else {
                    return val;
                }
            };
        }
    },
    methods: {
        ...{ cwnEncrypt, cwnDecrypt },
        //页面跳转
        toDetail() {
            let item = this.item;
            switch (item.sortType) {
            case 'TOPIC':
                this.$router.push({path: '/circle/topic/detail', query: {id: item.id, circleId: this.wcId}});
                break;
            case 'KNOWLEDGE':
                this.$router.push({path: `/circle/knowledge/knowledgeInfo/${item.id}/${item.sourceType}`});
                // this.$router.push({path: '/circle/knowledge/knowledgeDetail', query: {wctId: item.id}});
                break;
            case 'ATLAS' : //图册
                // this.$router.push({path: `/circle/photo/photoList/${this.wcId}`});
                let query = {
                    wcaWcId: this.wcId,
                    wcaName: item.summary,
                    wcaId: item.id,
                    authorName: item.authorName
                };
                this.$router.push({path: '/circle/photo/photoDetail', query: query});
                break;
            case 'ACTIVITY' : //活动
                this.$router.push({path: `/circle/activityDetail/${item.id}`});
                break;
            case 'PICTURE' : //图片
                item.wcaWcId = item.id;
                item.wcaId = this.wcId;
                this.$router.push({path: `/circle/photo/photoDetail`, query: item});
                break;
            case 'VOTE': //投票
                this.$router.push({path: '/circle/vote/detail', query: {votId: item.id}});
                break;
            case 'MEMBER': //成员
                this.$router.push({path: `/personal/${this.cwnEncrypt(item.id)}`});
                break;
            default:
                break;
            }
        }
    },
    filters: {
        getIcon(type) {
            switch (type) {
            case 'CATALOG':
                return dir;
            case 'TXT':
                return txt;
            case 'XLS':
                return xls;
            case 'DOC':
                return doc;
            case 'ARTICLE':
                return article;
            case 'PPT':
            case 'PDF':
                return ppt;
            case 'BRAIN':
                return brain;
            default:
                return article;
            }
        }
    }
};
</script>

<style scoped lang="less">
  .course-container{
    display: flex;
    padding: 5px 10px;
    height: 100%;
    border-bottom: 1px #c9c9c9 solid;
    .course-img{
      width: 35%;
      padding: 5px 10px 5px 0;
    }
    .course-desc{
      display: flex;
      width: 65%;
      flex-direction: column;
      padding: 5px 0;
      .desc{
        overflow: hidden;
        white-space: nowrap;
        padding: 15px 0;
        color: #c9c9c9;
        font-size: 12px;
        text-overflow: ellipsis;
      }
      .desc-time{
        display: flex;
        justify-content: space-between;
        >p{
          color: #c9c9c9;
          font-size: 12px;
        }
      }
    }
  }
  .user-container{
    display: flex;
    padding: 10px;
    border-bottom: 1px #c9c9c9 solid;
    .user-desc{
      display: flex;
      flex-direction: column;
      width: 65%;
      padding: 0 20px;
      .user-dept{
        color: #c9c9c9;
        font-size: 12px;
        padding: 10px 0;
      }
      .user-time{
        display: flex;
        justify-content: space-between;
        >p{
          color: #c9c9c9;
          font-size: 12px;
        }
      }
    }
  }
  .topic-container{
    display: flex;
    flex-direction: column;
    padding: 15px 10px;
    border-bottom: 1px #c9c9c9 solid;
    .question-time{
      display: flex;
      justify-content: space-between;
      padding-top: 15px;
      >p{
        color: #c9c9c9;
        line-height: 10px;
        font-size: 14px;
      }
      .question-person{
        display: flex;
        >p{
          color: #c9c9c9;
          line-height: 10px;
          font-size: 14px;
        }
      }
    }
  }
  .knowledge-container{
    padding: 10px;
    border-bottom: 1px #c9c9c9 solid;
    .knowledge-title{
      display: flex;
      >p{
        padding-top: 8px;
      }
      .icon {
        width: 30px;
        height: 30px;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
        margin-right: 5px;
      }
    }
    .knowledge-time{
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      line-height: 10px;
      >p{
        color: #c9c9c9;
        font-size: 14px;
      }
      .knowledge-person{
        display: flex;
        color: #c9c9c9;
        font-size: 14px
      }
    }
  }
  .active-container{
    display: flex;
    flex-direction: column;
    padding: 0 10px;
    border-bottom: 1px #c9c9c9 solid;
    span{
      padding: 10px 0
    }
    >div{
      color: #c9c9c9;
      font-size: 14px;
      margin-bottom: 10px;
    }
  }
</style>
